<template>
    <div>
        <el-row class="section">
            <el-col class="offset">
                <el-form :inline="true">
                    <el-col :span="8">
                        <el-form-item label="老人名称">
                            <el-input v-model="orderParam.name" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="护理级别">
                            <el-select v-model="orderParam.nursingId" placeholder="请选择">
                                <el-option v-for="nursingLevel in nursingLevelDate" :key="nursingLevel.id"
                                    :label="nursingLevel.name" :value="nursingLevel.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="责任护士">
                            <el-select v-model="orderParam.nurseId" placeholder="请选择">
                                <el-option v-for="employee in employeeData" :key="employee.id" :label="employee.name"
                                    :value="employee.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><br>
                    <el-col :span="8">
                        <el-form-item label="区域">
                            <el-select v-model="orderParam.areaId" placeholder="请选择" @change="updateRooms">
                                <el-option v-for="area in areaData" :key="area.id" :label="area.name" :value="area.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="房间">
                            <el-select v-model="orderParam.roomId" placeholder="请选择" @change="updateBeds">
                                <el-option v-for="room in roomData" :key="room.id" :label="room.roomnum"
                                    :value="room.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="床位号">
                            <el-select v-model="orderParam.bedId" placeholder="请选择">
                                <el-option v-for="bed in bedData" :key="bed.id" :label="bed.number" :value="bed.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><br>
                    <el-col :span="8">
                        <el-form-item label="登记时间">
                            <el-date-picker v-model="orderParam.inTime" type="date" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14" class="align-right">
                        <el-form :inline="true">
                            <el-button type="primary" @click="queryUserInfo">搜索</el-button>
                            <el-button @click="clear">重置</el-button>
                        </el-form>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="offset">
            <el-button type="primary" @click="doCare">执行护理</el-button>
        </el-row>
        <el-row>
            <el-col class="section2">
                <div class="offset">
                    {{ displayAreaName }} ({{ this.total }}人)
                </div>
                <div class="flex-container">
                    <div class="offset">
                        <div class="square1"></div>
                        <div class="text" style="color: black;">一级护理</div>
                    </div>
                    <div class="offset">
                        <div class="square2"></div>
                        <div class="text" style="color: black;">二级护理</div>
                    </div>
                    <div class="offset">
                        <div class="square3"></div>
                        <div class="text" style="color: black;">三级护理</div>
                    </div>
                    <div class="offset">
                        <div class="square4"></div>
                        <div class="text" style="color: black;">特级护理</div>
                    </div>
                </div>
                <el-col :span="24">
                    <div class="card-container offset3">
                        <el-card v-for="(data, index) in tableData" :key="index"
                            @click.native="handleCardClick(data, index)"
                            :class="{ 'selected': index === selectedCardIndex }">
                            <el-row>
                                <el-col :span="8">
                                    <div class="circle-num">
                                        <img :src="data.icon" alt="Avatar" style="width:50px;height:50px">
                                    </div>
                                </el-col>
                                <el-row>
                                    <el-col :span="8">
                                        <div style="font-weight:bold;font-size:15px;">{{ data.name }}</div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div v-if="data.gender === 1" style="font-size:15px;">男</div>
                                        <div v-else>女</div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div>{{ data.age }}岁</div>
                                    </el-col>
                                    <div v-if="data.socialStatus === 0" style="font-size:15px;">职工社保</div>
                                    <div v-else>居民社保</div>
                                </el-row>
                            </el-row>
                            <el-row>
                                <div style="font-size:13px;margin-top:15px">入院时间: {{ data.inTime }}</div>
                            </el-row>
                            <el-row>
                                <div style="font-size:13px;margin-top:15px">责任护士: {{ data.nurseName }}</div>
                            </el-row>
                            <el-row>
                                <div style="font-size:13px;margin-top:15px">房间: {{ data.roomnum }}</div>
                            </el-row>
                            <el-row>
                                <div style="font-size:13px;margin-top:15px">床位号: {{ data.number }}</div>
                            </el-row>
                            <el-row>
                                <div :style="{
                    color: data.nursingName == '三级护理' ? 'red' : data.nursingName === '二级护理' ? 'blue' : data.nursingName === '三级护理' ? 'green' : 'purple',
                    fontSize: '12px', marginTop: '15px'
                }">
                                    {{ data.nursingName }}
                                </div>
                            </el-row>
                        </el-card>
                    </div>
                </el-col>
                <el-col class="align-right">
                    <!-- 放分页部分 -->
                    <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                        layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                        @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
                </el-col>
            </el-col>
            <el-col class="section3" v-if="selectedCardIndex != -1">
                <div class="offset">老人信息</div>
                <el-row style="margin-top: 50px;" class="offset1">
                    <el-col :span="8">
                        <div class="circle-num">
                            <img :src="this.user.icon" alt="Avatar" style="width:50px;height:50px">
                        </div>
                    </el-col>
                    <el-row>
                        <el-col :span="7">
                            <div style="font-weight:bold;font-size:15px;">{{ this.user.name }}</div>
                        </el-col>
                        <el-col :span="4">
                            <div v-if="this.user.gender === 1" style="font-size:15px;">男</div>
                            <div v-else>女</div>
                        </el-col>
                        <el-col :span="4">
                            <div>{{ this.user.age }}岁</div>
                        </el-col><br>
                        <div v-if="this.user.socialStatus === 0" style="font-size:15px;">职工社保</div>
                        <div v-else>居民社保</div>
                        <el-row>
                            <div style="font-size:15px;margin-top:30px">档案号: {{ this.user.userNum }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">证件号: {{ this.user.identity }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">联系电话: {{ this.user.tel }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">-------------------------------------------
                            </div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">住院区域: {{ this.user.areaNum }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">房间: {{ this.user.roomnum }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">床位号: {{ this.user.number }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">主管医师: {{ this.user.doctorNum }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">责任护士: {{ this.user.nurseName }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">护工: {{ this.user.porterName }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">护理级别: {{ this.user.nursingName }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">入院诊断: {{ this.user.admissionDiagnosis }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">-------------------------------------------
                            </div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">入院时间: {{ this.user.inTime }}</div>
                        </el-row>
                        <el-row>
                            <div style="font-size:15px;margin-top:15px">住院余额: {{ this.user.resultMoney }}</div>
                        </el-row>
                    </el-row>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedCardIndex: -1,
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                name: '',
                nursingId: '',
                nurseId: '',
                areaId: '',
                roomId: '',
                bedId: '',
                inTime: '',
                status:'1'
            },
            nursingLevelDate: [],
            employeeData: [],
            areaData: [],
            roomData: [],
            bedData: [],
            tableData: [],
            user: {
            }
        }
    },
    methods: {
        clear() {
            this.orderParam = {}
            this.queryUserInfo();
            this.roomData = []; // 清空房间数据
            this.bedData = []; // 清空床位数据
            this.user = {};
            this.selectedCardIndex = -1; // 重置选中卡片
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryUserInfo();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryUserInfo();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryUserInfo();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryUserInfo();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryUserInfo();
        },
        queryUserInfo() {
            //带分页参数pageNum,pageSize
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post("api/user/queryUser", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        //查询护理级别
        queryNursingLevel() {
            this.$axios.get('api/dict/queryDict/' + 67)
                .then(res => {
                    if (res.data.code == 200) {
                        this.nursingLevelDate = res.data.data
                    }
                })
        },
        //查所有护士
        queryAllNurse() {
            this.$axios.get('api/nursing/queryAllNurse')
                .then(res => {
                    if (res.data.code == 200) {
                        this.employeeData = res.data.data
                    }
                })
        },
        //查找所有区域
        queryAllArea() {
            this.$axios.get('api/bed/queryAllArea')
                .then(res => {
                    if (res.data.code == 200) {
                        this.areaData = res.data.data
                        if (this.orderParam.areaId) {
                            this.nameOfSelectedArea = this.areaData[0].name
                        }
                    }
                })
        },
        //根据区域id查找房间
        updateRooms() {
            this.orderParam.roomId = "";
            this.orderParam.bedId = "";
            this.$axios.get('api/bed/queryByAreaId/' + this.orderParam.areaId)
                .then(res => {
                    if (res.data.code == 200) {
                        this.roomData = res.data.data
                    }
                })
        },
        updateBeds() {
            this.orderParam.bedId = "";
            this.$axios.get('api/bed/queryBedByRoomId/' + this.orderParam.roomId)
                .then(res => {
                    if (res.data.code == 200) {
                        this.bedData = res.data.data
                    }
                })
        },
        handleCardClick(data, index) {
            // 处理点击事件的逻辑，可以访问卡片的数据对象 data
            console.log('选中了卡片，索引为：', index);
            // 将 selectedCardIndex 设置为被选中的卡片索引
            this.selectedCardIndex = index;
            this.user = data
            console.log(this.user)
        },
        doCare() {
            this.$router.push({ path: '/performCare' })
        }
    },
    created() {
        this.queryNursingLevel();
        this.queryAllNurse();
        this.queryAllArea()
        this.queryUserInfo()
    },
    computed: {
        // 计算属性 displayAreaName
        displayAreaName: function () {
            // 如果已选择一个区域，就显示该区域的名称
            if (this.orderParam.areaId) {
                let selectedArea = this.areaData.find(area => area.id === this.orderParam.areaId);
                return selectedArea ? selectedArea.name : '';
            }
            // 如果没有选择任何区域，就显示第一个区域的名称
            return this.areaData.length > 0 ? '总人数' : '';
        }
    }
}
</script>

<style scoped>
.section {
    width: 1350px;
    height: 250px;
    background-color: white;
    margin-left: 50px;
    margin-top: 50px;
}

.section3 {
    width: 300px;
    height: 800px;
    background-color: white;
    margin-top: 10px;
    margin-left: 25px;
}

.section2 {
    width: 1000px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 10px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 20px;
}

.offset2 {
    margin-left: 100px;
}

.offset3 {
    margin-top: 30px;
    margin-left: 25px;
}

.info {
    display: flex;
    align-items: center;
}

.flex-container {
    display: flex;
    /* 将父级元素设为flex，使其子元素按行排列 */
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.offset .square1 {
    width: 15px;
    height: 15px;
    background-color: red;
    display: inline-block;
}

.offset .square2 {
    width: 15px;
    /* 或者你想设置的大小 */
    height: 15px;
    /* 或者你想设置的大小 */
    background-color: blue;
    /* 或者你想设置的颜色 */
    display: inline-block;
}

.offset .square3 {
    width: 15px;
    /* 或者你想设置的大小 */
    height: 15px;
    /* 或者你想设置的大小 */
    background-color: green;
    /* 或者你想设置的颜色 */
    display: inline-block;
}

.offset .square4 {
    width: 15px;
    /* 或者你想设置的大小 */
    height: 15px;
    /* 或者你想设置的大小 */
    background-color: purple;
    /* 或者你想设置的颜色 */
    display: inline-block;
}

.offset .text {
    display: inline-block;
    vertical-align: middle;
    /* 保证文本与正方形垂直居中对齐 */
    margin-left: 10px;
    /* 根据需要调整文本与正方形之间的距离 */
}

.circle-num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* 给予元素圆形形状 */
    background-color: #ff7f00;
    /* 背景颜色 */
    color: white;
    font-size: 16px;
    /* 绝对定位使得这个元素可以相对于父元素定位 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.card-container .el-card {
    flex-basis: calc(30% - 20px);
    margin: 10px;
}

.selected {
    border: 2px solid blue;
}
</style>